<template>
  <view>
      <!-- 上方背景区域 -->
      <view class="topbackground">
        <view class="myInfo">
          <view class="imgIcon">
            <!-- <u--image class="img" src="../../static/my-icons/img-头像.png" shape="circle"></u--image> -->
            <image src="../../static/my-icons/img-头像.png"></image>
          </view>
          <view>{{name}}</view>
          <view>司机编号：{{number}}</view>
          <view>手机号：{{phone}}</view>
        </view>
      </view>
      <!-- 主体区域 -->
      <view class="container">
          <!-- 本月任务 -->
          <view class="teskInfo">
            <view class="title"> - 本月任务 - </view>
            <view class="info">
              <view class="cl">
                <view class="num">{{taskAmounts}}</view>
                <view class="title">任务总量</view>
              </view>
              <view class="cl">
                <view class="num">{{completedAmounts}}</view>
                <view class="title">完成任务量</view>
              </view>
              <view class="cl">
                <view class="num">{{transportMileage }}</view>
                <view class="title">运输里程(km)</view>
              </view>
            </view>
          </view>
          <!-- 导航列表 -->
          <view class="navList">
            <navigator class="line" url="/subpkg/vehicle_info/vehicle_info">
              <text>车辆信息</text>
              <u-icon name="arrow-right"></u-icon>
            </navigator>
            <navigator class="line" url="/subpkg/task_data/task_data">
              <text>任务数据</text>
              <u-icon name="arrow-right"></u-icon>
            </navigator>
            <view class="line">
              <text>系统设置</text>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
      </view>
  </view>
</template>

<script>
  export default {
    name: '',
    components: {},
    data() {
      return {
      name:'',
      number:'',
      phone:'',
      taskAmounts:0,
      completedAmounts:0,
      transportMileage:''
      
      };
    },
   async created() {
     // 获取用户信息
      let res = await uni.$http.get('/users')
      console.log(res);
      this.name = res.data.data.name
      this.number = res.data.data.number
      this.phone = res.data.data.phone
      // 获取车辆信息
      let {data:{data:{taskAmounts,completedAmounts,transportMileage
}}} = await uni.$http.get('/users/taskReport',{
        year:new Date().getFullYear(),
        month:new Date().getMonth() + 1
      })
      // console.log(res1);
      this.taskAmounts = taskAmounts
      this.completedAmounts = completedAmounts
      this.transportMileage = transportMileage
    },
    mounted() {},
    onLoad() {},
    methods: {

    }
  }
</script>

<style lang="scss">
    .topbackground {
      height: 270px;
      background-color: #F4F4F4;
      background: url('../../static/my-icons/img-bg.png') no-repeat ;

      // &::before {
      //   content: '';
      //   width: 100%;
      //   height: 261px;
      //   display: block;
      //   // position: absolute;
      //   // z-index: 99;
      //   top: 0px;
      // }
      .myInfo {
        // position: absolute;
        // top: 50%;
        // left: 50%;
        // transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        color: #fff;

        view {
          margin-top: 8px;
        }

        view:nth-child(2) {
          font-size: 18px;
        }

        view:nth-child(3),
        view:nth-child(4) {
          font-size: 14px;
        }

        .imgIcon {

          // width: 65px;
          // height: 65px;
          image {
            width: 65px;
            height: 65px;
          }
        }
      }
    }

    .container {
      // top: -30px;
      padding: 0 15px;
      height: 350px;
      background-color: #F4F4F4;
       .teskInfo {
         position: relative;
         top: -40px;
         padding: 13px 24px;
         background-color: #fff;
         border-radius: 8px;
         margin-bottom: 15px;
       
         .title {
           padding-bottom: 10px;
           text-align: center;
         }
       
         .info {
           display: flex;
           justify-content: space-between;
           align-items: center;
       
           .cl {
             display: flex;
             flex-direction: column;
             justify-content: space-between;
             align-items: center;
       
             .num {
               margin-bottom: 14px;
               font-size: 18px;
               color: #2A2929;
             }
       
             .title {
               font-size: 12px;
               color: #2A2929;
             }
           }
         }
       }
       
       .navList {
         position: relative;
         top: -40px;
         padding: 0 24px;
         background-color: #fff;
         font-size: 16px;
         border-radius: 8px;
       
         .line {
           display: flex;
           justify-content: space-between;
           align-items: center;
           height: 59px;
         }
       }
     
      
    }
  
</style>